<template>
    <webLayout>
        <template v-slot:header>
            <div class="home-hd-lt">
                <div class="home-hd-lt__tilte">数字支付与金融服务 平台</div>
                <div class="home-hd-lt__info">
                    在全球收付款、钱包账户、财务管理以及金融增值服务多场景提供解决方案，赋能企业全球展业。
                </div>
            </div>
            <div class="home-hd-rt"></div>
        </template>
        <div class="main">
            <!-- 解决方案 -->
            <div class="main-option">
                <!--<div class="main-bg2"></div>
                <div class="main-bg3"></div>
                <div class="main-bg4"></div>
                <div class="main-bg5"></div>-->
                <div class="main-option__title">
                    为企业全球化提供端到端的解决方案
                </div>
                <div class="main-option__info">
                    领先的金融科技技术，为您优化资金链路，缩短交易距离，降低贸易成本，为企业全球化更具竞争力提供全案服务。
                </div>
                <div class="main-option__card">
                    <div class="main-option__card-item">
                        <img
                            src="../../assets/image/web/card-icon1.png"
                            alt=""
                            class="main-option__card-item__icon"
                        />
                        <div class="main-option__card-item__title">
                            同名全球账户
                        </div>
                        <div class="main-option__card-item__text">
                            实现跨境与本地无障碍收付款
                        </div>
                    </div>
                    <div class="main-option__card-item">
                        <img
                            src="../../assets/image/web/card-icon2.png"
                            alt=""
                            class="main-option__card-item__icon"
                        />
                        <div class="main-option__card-item__title">
                            企业级虚拟卡
                        </div>
                        <div class="main-option__card-item__text">
                            无消费场景限制，付达全球
                        </div>
                    </div>
                    <div class="main-option__card-item">
                        <img
                            src="../../assets/image/web/card-icon3.png"
                            alt=""
                            class="main-option__card-item__icon"
                        />
                        <div class="main-option__card-item__title">
                            定制化后台
                        </div>
                        <div class="main-option__card-item__text">
                            多权限多角色创建，管理更方便
                        </div>
                    </div>
                </div>
            </div>
            <!-- 我们的用户 -->
            <div class="main-user">
                <div class="main-user__title">我们的用户</div>
                <div class="main-user__info">服务中国出海企业与个人</div>
                <div class="main-user__card">
                    <div class="main-user__card-item">
                        <img
                            src="../../assets/image/web/user-bg1.png"
                            alt=""
                            class="main-user__card-item__icon"
                        />
                        <div class="main-user__card-item__title">外贸B2B</div>
                    </div>
                    <div class="main-user__card-item">
                        <img
                            src="../../assets/image/web/user-bg2.png"
                            alt=""
                            class="main-user__card-item__icon"
                        />
                        <div class="main-user__card-item__title">跨境电商</div>
                    </div>
                    <div class="main-user__card-item">
                        <img
                            src="../../assets/image/web/user-bg3.png"
                            alt=""
                            class="main-user__card-item__icon"
                        />
                        <div class="main-user__card-item__title">
                            出海服务商
                        </div>
                    </div>
                </div>
            </div>
            <!-- 视安全合规为第一准则 -->
            <div class="main-secure">
                <div class="main-secure__title">视安全合规为第一准则</div>
                <div class="main-secure__card">
                    <div class="main-secure__card-item">
                        <img
                            src="../../assets/image/web/secure-bg1.png"
                            alt=""
                            class="main-secure__card-item__icon"
                        />
                        <div class="main-secure__card-item__wp">
                            <div class="main-secure__card-item__title">
                                资金安全
                            </div>
                            <div class="main-secure__card-item__info">
                                您的每一笔资金我们都视为生命线，您可以随时调用您的资金，在未经授权的情况下我们不会将您的资金挪作他用。
                            </div>
                            <div class="main-secure__card-item__line"></div>
                        </div>
                        <div class="main-secure__card-item__box">
                            <span class="main-secure__card-item__box__title"
                                >01</span
                            >
                            <span
                                class="main-secure__card-item__box__line"
                            ></span>
                        </div>
                    </div>
                    <div class="main-secure__card-item">
                        <div class="main-secure__card-item__wp">
                            <div class="main-secure__card-item__title">
                                系统安全
                            </div>
                            <div class="main-secure__card-item__info">
                                我们拥有一流的反洗钱监控算法，以确保您的帐户数字信息安全。
                            </div>
                            <div class="main-secure__card-item__line"></div>
                        </div>
                        <img
                            src="../../assets/image/web/secure-bg2.png"
                            alt=""
                            class="main-secure__card-item__icon"
                        />
                        <div class="main-secure__card-item__box">
                            <span class="main-secure__card-item__box__title"
                                >02</span
                            >
                            <span
                                class="main-secure__card-item__box__line"
                            ></span>
                        </div>
                    </div>
                    <div class="main-secure__card-item">
                        <img
                            src="../../assets/image/web/secure-bg3.png"
                            alt=""
                            class="main-secure__card-item__icon"
                        />
                        <div class="main-secure__card-item__wp">
                            <div class="main-secure__card-item__title">
                                合规风控
                            </div>
                            <div class="main-secure__card-item__info">
                                我们深知合规的重要性，也坚信合规能让我们走的更远，我们始终严格遵守运营地的法规和市场行业标准。
                            </div>
                            <div class="main-secure__card-item__line"></div>
                        </div>
                        <div class="main-secure__card-item__box">
                            <span class="main-secure__card-item__box__title"
                                >03</span
                            >
                            <span
                                class="main-secure__card-item__box__line"
                            ></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-bg1"></div>
        </div>
    </webLayout>
</template>

<script setup>
import webLayout from "./components/webLayout.vue";
</script>

<style lang="scss" scoped>

.home-hd-lt {
    position: absolute;
    top: 110px;
    left: 0px;
    z-index: 40;
    .home-hd-lt__tilte {
        max-width: 585px;
        height: 162px;
        font-weight: 600;
        font-size: 65px;
        color: #ffffff;
        line-height: 81px;
    }
    .home-hd-lt__info {
        font-size: 24px;
        color: #ffffff;
        margin-top: 26px;
        max-width: 725px;
        height: 66px;
    }
}

.home-hd-rt {
    width: 600px;
    height: 390px;
    background: url("../../assets/image/web/home-hd-bg.png") center center;
    background-size: 100% 100%;
    position: absolute;
    top: 210px;
    right: 0px;
    z-index: 40;
}

.main {
    position: relative;
    .main-bg1 {
        width: 1753px;
        height: 1040px;
        background: url("../../assets/image/web/main-bg.png") center center;
        background-size: 100% 100%;
        position: absolute;
        top: 459px;
        right: 0;
        z-index: 1;
    }
}

.main-option {
    position: relative;
    width: 1440px;
    margin-left: -720px;
    left:50%;
    z-index: 10;
    .main-bg2 {
        width: 482px;
        height: 468px;
        background: url("../../assets/image/web/star1.png") no-repeat center;
        background-size: 80% 80%;
        position: absolute;
        top: 489px;
        left: -176px;
    }
    .main-bg3 {
        width: 381px;
        height: 370px;
        background: url("../../assets/image/web/star2.png") no-repeat center;
        background-size: 80% 80%;
        position: absolute;
        top: 385px;
        left: 0px;
    }
    .main-bg4 {
        width: 271px;
        height: 272px;
        background: url("../../assets/image/web/star3.png") no-repeat center;
        background-size: 60% 55%;
        position: absolute;
        top: 20px;
        left: 940px;
    }
    .main-bg5 {
        width: 156px;
        height: 157px;
        background: url("../../assets/image/web/star4.png") no-repeat center;
        background-size: 80% 60%;
        position: absolute;
        top: 0;
        left: 1063px;
    }
    .main-option__title {
        width: 813px;
        height: 168px;
        font-size: 64px;
        color: #000000;
        line-height: 84px;
        margin: 0 auto;
        text-align: center;
        margin-top: 14px;
    }
    .main-option__info {
        width: 813px;
        height: 85px;
        font-weight: 400;
        font-size: 28px;
        color: #666666;
        line-height: 43px;
        margin: 0 auto;
        text-align: center;
        margin-top: 40px;
    }
    .main-option__card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 60px;
        .main-option__card-item {
            width: 425px;
            height: 289px;
            background: #ffffff;
            box-shadow: 7px 13px 40px 0px rgba(41, 26, 204, 0.12);
            border-radius: 8px;
            padding: 46px;
            .main-option__card-item__icon {
                width: 80px;
                height: 80px;
            }
            .main-option__card-item__title {
                font-size: 29px;
                color: #4a4a4a;
                line-height: 39px;
                margin-top: 25px;
            }
            .main-option__card-item__text {
                font-size: 21px;
                color: #9b9b9b;
                line-height: 29px;
                margin-top: 13px;
            }
            &:hover {
                background: #7d3aea;
                .main-option__card-item__title {
                    color: #fff;
                }
                .main-option__card-item__text {
                    color: #fff;
                }
            }
        }
    }
}

.main-user {
    position: relative;
    width: 1440px;
    margin-left: -720px;
    left:50%;
    margin-top: 197px;
    z-index: 10;
    .main-user__title {
        width: 813px;
        font-size: 64px;
        color: #000000;
        line-height: 84px;
        margin: 0 auto;
        text-align: center;
        margin-top: 14px;
    }
    .main-user__info {
        width: 813px;

        font-weight: 400;
        font-size: 28px;
        color: #666666;
        line-height: 43px;
        margin: 0 auto;
        text-align: center;
        margin-top: 40px;
    }
    .main-user__card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 60px;
        .main-user__card-item {
            width: 425px;
            height: 662px;
            background: #ffffff;
            box-shadow: 7px 13px 40px 0px rgba(41, 26, 204, 0.12);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            .main-user__card-item__icon {
                flex: 1;
            }
            .main-user__card-item__title {
                height: 86px;
                font-size: 34px;
                color: #333333;
                line-height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
.main-secure {
    position: relative;
    width: 1440px;
    margin-left: -720px;
    left:50%;
    margin-top: 197px;
    z-index: 10;
    .main-secure__title {
        width: 813px;
        font-size: 64px;
        color: #000000;
        line-height: 84px;
        margin: 0 auto;
        text-align: center;
        margin-top: 14px;
    }
    .main-secure__card {
        margin-top: 83px;
        .main-secure__card-item {
            width: 100%;

            display: flex;
            position: relative;
            .main-secure__card-item__icon {
                width: 50%;
                height: 548px;
            }
            .main-secure__card-item__wp {
                width: 50%;
                height: 548px;
                display: flex;
                flex-direction: column;
                padding-top: 160px;
                padding-left: 100px;
                padding-right: 100px;
                .main-secure__card-item__title {
                    font-size: 72px;
                    color: #333333;
                    line-height: 126px;
                }
                .main-secure__card-item__info {
                    font-size: 18px;
                    color: #000000;
                    line-height: 33px;
                    margin-top: 44px;
                    font-weight: bold;
                }
                .main-secure__card-item__line {
                    width: 22px;
                    height: 5px;
                    background: #5e3db3;
                    border-radius: 3px;
                    margin-top: 102px;
                }
            }
            .main-secure__card-item__box {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);

                width: 168px;
                height: 155px;
                background: #7d3aea;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .main-secure__card-item__box__title {
                    font-size: 24px;
                    color: #ffffff;
                    line-height: 33px;
                }
                .main-secure__card-item__box__line {
                    width: 22px;
                    height: 5px;
                    background: rgba(255, 255, 255, 0.3);
                    border-radius: 3px;
                }
            }
        }
    }
}
</style>
